<template>
	<!--球员基本信息-->
	<z-nav-bar class="nav-bar" title="球员评测"></z-nav-bar>
	<!--技能测评-->
	<view style="padding: 0 32rpx;">
		<view class="z-font-32 text-w">全部评测：{{ topCount }}次</view>
		<view class="flex_sbc uni-mt-32 uni-mb-32">
			<view v-for="(item, index) in topObj" :key="index" class="flex_cc total-box" :style="{background: item.background,color: item.color}">
				<view>
					<view class="flex_cc">
						<view class="z-font-48 text-w">{{ item.num }}</view>
						<view>次</view>
					</view>
					<view>{{ item.name }}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="cp-jn">
		<view class="cp-jn-tit">
			<text class="text-w">实战自测</text>
			<text class="cp-bz">(可多次测评)</text>
		</view>
		<view class="cp-jn-con">
			<text v-for="field in data.fieldTest" :key="field.id" @click="fetchDetail(field, 5)">
				{{ field.dictLabel }}
			</text>
		</view>
	</view>
	<view class="cp-ht2">&nbsp;</view>
	<!--历史测评-->
	<view class="cp-history">
		<view class="cp-history-tit flex_sbc">
			<text>历史评测</text>
		</view>
		<scroll-view class="cp-history-dh" scroll-x>
			<text v-for="(etype, index) in evaluationText" :key="index" :class="{ select: nowType === index }" @click="changeHistoryType(index)">
				{{ etype }}
			</text>
		</scroll-view>
		<uni-datetime-picker v-model="timeArray" type="datetimerange" @change="changDate">
			<view class="cp-history-time flex_fsc">
				<view class="cp-history-time-left">
					{{ Array.isArray(timeArray) ? timeArray[0] : '开始时间' }}
				</view>
				<view class="time-ht">-</view>
				<view class="cp-history-time-left">
					{{ Array.isArray(timeArray) ? timeArray[1] : '结束时间' }}
				</view>
			</view>
		</uni-datetime-picker>
		<view v-if="historyList && historyList.length" class="cp-history-list">
			<view v-for="history in historyList" :key="history.id" class="cp-history-con" @click="viewHistory(history)">
				<view class="cp-history-con-top flex_sbc">
					<view class="cp-history-con-top-left flex_fsc">
						<image :src="`/static/player/evaluation/${[1, 2, 4].includes(history.type) ? 'cp-jn.png' : 'cp-gj.png'}`" mode="" class="uni-pr-24"></image>
						<text>{{ history.typeStrFst }}</text>
						<text class="cp-history-tit-bz">{{ history.typeStrSed }}</text>
					</view>
					<view v-if="[3, 5].includes(history.type)" class="cp-history-con-top-right flex_fsc">
						<text>评分:{{ history.score }}</text>
						<uni-rate size="12" v-model="history.score" readonly="true" color="#E1E3E6" active-color="#FF7742" />
					</view>
				</view>
				<view class="cp-history-con-bottom flex_sbc">
					<text class="cp-history-con-bottom-time">{{ history.updateTime }}</text>
					<view class="cp-history-con-bottom-right flex_fsc">
						<text>查看</text>
						<image :src="setting.oss_pub_domain + '/app-img/player/evaluation/look_more.png'" class="icon-size-32"></image>
					</view>
				</view>
			</view>
		</view>
		<z-no-data v-else></z-no-data>
	</view>
	<view v-if="historyList.length < paramsHistory.total" class="look-more">上拉加载更多</view>
	<view class="uni-pt-20"></view>
</template>

<script setup>
import { onReachBottom, onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { getEvaluationList, getMyEvaluationHistory, getEvaluationDetail, getMyEvaluationStatistics } from '@/api/player';
const { proxy: that } = getCurrentInstance();
const playerInfo = uni.getStorageSync('player-info') || {};

const topObj = reactive([{
	num: 89,
	name: '技能测试',
	background: '#F9EFEB',
	color: '#FF7742'
},
{
	num: 89,
	name: '高级测试',
	background: '#ECF9EB',
	color: '#00AB64'
},
{
	num: 89,
	name: '实战测试',
	background: '#EBF5F9',
	color: '#428FFF'
},
{
	num: 89,
	name: '自测试',
	background: '#F3EBF9',
	color: '#A042FF'
}]),
topCount = ref(0)

// 评测项目列表
const data = reactive({});
const evaluationText = ['全部', '技能测试', '高级测试', '实战测试', '学员自测'];
onShow(() => {
	fetchList();
	paramsHistory.pageNum = 1;
	timeArray.value = '';
	getMyEvaluationStatistics().then(res => {
		topCount.value = res.total
		topObj[0].num = res.skillNum
		topObj[1].num = res.seniorNum
		topObj[2].num = res.actualNum
		topObj[3].num = res.selfNum
	})
});
function fetchList(type) {
	const argument = { type: 5 };
	if (playerInfo.id) argument.stuId = playerInfo.id;
	getEvaluationList(argument).then((res) => {
		data.fieldTest = res;
	});
}

function fetchDetail(element, type) {
	uni.showLoading({
		title: '加载中...'
	});
	getEvaluationDetail({ code: element.dictCode, stuId: playerInfo.id })
		.then((res) => {
			res.playerInfo = playerInfo;
			res.type = type;
			uni.setStorageSync('evaluation-data', res);
			if ([1, 2, 4].includes(type)) {
				uni.navigateTo({
					url: '/pages/player/evaluation/base/base'
				});
			} else {
				uni.navigateTo({
					url: `/pages/player/evaluation/evaluation-base/${res.id === 294102 ? 'base-two' : 'evaluation-base'}`
				});
			}
			uni.hideLoading();
		})
		.catch(() => {
			uni.hideLoading();
		});
}

// 评测历史
const historyList = ref([]),
	paramsHistory = reactive({
		pageNum: 1,
		pageSize: 10,
		total: 0
	});
fetchHistoryList();
function fetchHistoryList(query = {}) {
	getMyEvaluationHistory({
		pageNum: paramsHistory.pageNum,
		pageSize: paramsHistory.pageSize,
		...query
	}).then((res) => {
		if (paramsHistory.pageNum === 1) {
			historyList.value = res.rows;
		} else {
			historyList.value.push(...res.rows);
		}
		paramsHistory.total = res.total;
	});
}

// 类型筛选
const nowType = ref(0);
function changeHistoryType(type) {
	paramsHistory.pageNum = 1;
	timeArray.value = '';
	if (type) {
		fetchHistoryList({ type });
	} else {
		fetchHistoryList();
	}
	nowType.value = type;
}

// 历史记录时间筛选
const timeArray = ref();
paramsHistory.pageNum = 1;
function changDate(e) {
	fetchHistoryList({
		beginTime: e[0],
		endTime: e[1]
	});
}

onReachBottom(() => {
	if (historyList.value.length >= paramsHistory.total) return;
	paramsHistory.pageNum += 1;
	fetchHistoryList();
});

function viewHistory(item) {
	if ([1, 2, 4].includes(item.type)) {
		uni.setStorageSync('evaluation-data', item);
		uni.navigateTo({
			url: '/pages/player/evaluation/base/base-view'
		});
	} else {
		uni.setStorageSync('local-evaluation', JSON.parse(item.result));
		uni.navigateTo({
			url: `/pages/player/evaluation/evaluation-${item.type === 3 ? 'detail/evaluation-detail' : 'actualcombat/evaluation-szresult'}`
		});
	}
}
</script>

<style lang="scss">
@import '../../player/evaluation/student-cpdetail/student-cpdetail.scss';
.total-box {
	width: 156rpx;
	height: 156rpx;
	border-radius: 16rpx;
	text-align: center;
}
</style>
